<template>
  <el-dialog
    title="题目审核"
    :visible.sync="showDialog"
    width="25%"
    center
    @close="closeShowDialog"
  >
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item style="margin-top:25px">
        <el-radio-group v-model="form.chkState">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="chkRemarks">
        <el-input
          v-model.trim="form.chkRemarks"
          placeholder="请输入审核意见"
          prop="chkRemarks"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- footer 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeShowDialog">取 消</el-button>
      <el-button type="primary" @click="btn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 试题审核
import { checkState } from '@/api/hmmm/questions.js'
export default {
  name: 'Check',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    checkFormDate: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        chkState: 1,
        chkRemarks: '' // 文本域的内容
      },
      rules: {
        chkRemarks: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { min: 5, max: 30, message: '5-30个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹层
    closeShowDialog() {
      this.form = {
        chkState: 1,
        chkRemarks: '' // 文本域的内容
      }
      this.$refs.formRef.resetFields()
      this.$emit('close')
    },
    // 点击确定按钮
    async btn() {
      try {
        // 校验表单
        await this.$refs.formRef.validate()
        // 调用接口
        await checkState({
          id: this.checkFormDate.id,
          chkState: this.form.chkState,
          chkRemarks: this.form.chkRemarks
        })
        this.$message.success('试题审核成功')
        // 更新数据
        this.$emit('update')
        // 关闭弹层
        this.$emit('close')
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
